<template>
  <div>
    <!-- 1.头部 -->
    <div class="hearBox">
      <!-- 左箭头 -->
      <span class="iconfont iconjiantou2" @click="goBack"></span>
      <!-- 搜索框容器 -->
      <div class="searchBox">
        <!-- 放大镜 -->
        <span class="iconfont iconsearch"></span>
        <!-- 是、搜索框 -->
        <input v-model="keyword" class="search" type="text" />
      </div>
      <!-- 搜索按钮 -->
      <div class="searchBtn" @click="send">搜索</div>
    </div>
    <!-- 2.记录 -->
    <!-- 当搜索记录长度大于0时，隐藏历史记录和搜索热门 -->
    <div class="record" v-if="searchList.length==0">
      <!-- 2.1历史记录 -->
      <div class="historyList">
        <h2>历史记录</h2>
        <!-- 数据项 -->
        <div class="itemBox">
          <div
            @click="keywodySend(item)"
            class="item"
            v-for="(item,index) in historyList"
            :key="index"
          >{{item}}</div>
        </div>
      </div>
      <!-- 2.2热门搜索 -->
      <div class="hotterList">
        <h2>热门搜索</h2>
        <!-- 数据项 -->
        <div class="itemBox">
          <div
            @click="keywodySend(item)"
            class="item"
            v-for="(item,index) in hotterList"
            :key="index"
          >{{item}}</div>
        </div>
      </div>
    </div>

    <!-- 3.文字列表数据 -->
    <div class="searchList">
      <postItem :postData="item" v-for="item in searchList" :key="item.id">{{item}}</postItem>
    </div>
  </div>
</template>

<script>
//引入文章组件
import postItem from "@/components/postItem";
export default {
  //组件组成
  components: {
    postItem
  },
  data() {
    return {
      //关键字
      keyword: "",
      //搜索结果数组
      searchList: [],
      //历史记录
      historyList: [],
      //热门搜索
      hotterList: ["美女", "阿信", "关晓彤"]
    };
  },
  //监听器
  watch: {
    keyword(newkeyword) {
      //!newkeyword:  关键字不存在
      if (!newkeyword) {
        //当关键字不存在的时候，将搜索到的数据情况，显示历史记录和热门搜索
        this.searchList = [];
      }
    }
  },
  created() {
    //* 先判断本地是否存在搜索历史记录
    //获取本地缓存数据--搜索历史记录
    if (localStorage.getItem("history")) {
      this.historyList = JSON.parse(localStorage.getItem("history"));
    }
  },
  methods: {
    //搜索按钮事件
    send() {
      //判断关键字是否为空，为空则终止请求
      if (!this.keyword) {
        return;
      }
      console.log(this.keyword);

      //点击搜索按钮，将关键字追加到历史记录数组
      //判断历史记录是否存在该关键字，如果没则追加进去
      if (this.historyList.indexOf(this.keyword) == -1) {
        this.historyList.push(this.keyword);
      }
      //将历史记录数组存储到本地缓存
      localStorage.setItem("history", JSON.stringify(this.historyList));

      this.$axios({
        url: "/post_search",
        params: { keyword: this.keyword }
      }).then(res => {
        console.log(res.data);
        //获取数据，存储到searchList
        this.searchList = res.data.data;
        console.log(this.searchList);
      });
    },

    //历史记录和热门搜索关键字点击事件
    keywodySend(item) {
      //1.改变关键字
      this.keyword = item;
      //2.执行搜索事件
      this.send();
    },

    //箭头回退事件
    goBack() {
      //情况1：如果有搜索数据长度，则清空关键字
      if (this.searchList.length > 0) {
        this.keyword = "";
      }
      //情况2：如果没有搜索数据长度，则返回首页
      else {
        this.$router.back();
      }
    }
  }
};
</script>

<style lang="less" scoped>
//1.头部
.hearBox {
  display: flex;
  padding: 2.778vw 5.556vw;
  align-items: center;
  justify-content: space-between;
  //左箭头
  .iconjiantou2 {
    font-size: 6.111vw;
  }
  //搜索容器
  .searchBox {
    width: 55.556vw;
    display: flex;
    align-items: center;
    margin: 0 2.778vw;
    border: 1px solid #ddd;
    border-radius: 5vw;
    box-sizing: border-box;
    //搜索框
    .search {
      width: 43.333vw;
      box-sizing: border-box;
      padding: 2.222vw 0;
      margin-left: 2.778vw;
      border-radius: 5vw;
      font-size: 4.444vw;
      border: none;
      outline: none;
    }
    //放大镜字体图标
    .iconsearch {
      margin-left: 4.444vw;
      font-size: 4.444vw;
      color: #888;
    }
  }
  //搜索按钮
  .searchBtn {
    padding: 1.667vw 5.556vw;
    font-size: 4.444vw;
  }
}
//2.记录
.record {
  padding: 4.444vw 5.556vw;
  //2-1历史记录
  .historyList {
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 5.556vw;
    padding: 2.778vw 0;
    h2 {
      font-size: 4.444vw;
      margin-bottom: 4.444vw;
    }
    //数据项
    .itemBox {
      display: flex;
      flex-wrap: wrap;
      //每一项数据
      .item {
        margin: 2.778vw 1.667vw;
        padding: 2.778vw 4.444vw;
        border: 1px solid skyblue;
      }
    }
  }
  //2-2热门搜索
  .hotterList {
    h2 {
      font-size: 4.444vw;
      margin-bottom: 4.444vw;
    }
    //数据项
    .itemBox {
      display: flex;
      flex-wrap: wrap;
      //每一项数据
      .item {
        margin: 2.778vw 1.667vw;
        padding: 2.778vw 4.444vw;
        border: 1px solid skyblue;
      }
    }
  }
}
</style>